<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>{{if .TitleZh}}{{.TitleZh}}{{else}}注册验证码{{end}}</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
				background: #f8fafb;
				min-height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;
				position: relative;
			}

			/* 科技背景 */
			body::before {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background:
					radial-gradient(circle at 20% 50%, rgba(0, 123, 255, 0.03) 0%, transparent 50%),
					radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
					radial-gradient(circle at 40% 80%, rgba(0, 123, 255, 0.02) 0%, transparent 50%);
				pointer-events: none;
			}

			.login-container {
				background: white;
				border-radius: 24px;
				box-shadow:
					0 24px 48px rgba(0, 123, 255, 0.08),
					0 8px 16px rgba(0, 0, 0, 0.04);
				overflow: hidden;
				max-width: 420px;
				width: 100%;
				position: relative;
				border: 1px solid rgba(0, 123, 255, 0.1);
			}

			.header {
				padding: 48px 40px 32px;
				text-align: center;
				position: relative;
				background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
			}

			.logo {
				font-size: 32px;
				font-weight: 700;
				color: #007bff;
				margin-bottom: 8px;
				letter-spacing: -0.5px;
			}

			.tagline {
				font-size: 14px;
				color: #6c757d;
				font-weight: 400;
			}

			.content {
				padding: 0 40px 48px;
			}

			.title {
				font-size: 28px;
				color: #1a1d29;
				text-align: center;
				margin-bottom: 8px;
				font-weight: 600;
				letter-spacing: -0.3px;
			}

			.subtitle {
				color: #6c757d;
				text-align: center;
				margin-bottom: 40px;
				font-size: 15px;
				font-weight: 400;
			}

			.verification-section {
				background: linear-gradient(135deg, #ffffff 0%, #e3f0ff 100%);
				border-radius: 16px;
				padding: 32px 24px;
				text-align: center;
				margin-bottom: 32px;
				position: relative;
				overflow: hidden;
				max-width: 100%;
				min-width: 0;
				box-sizing: border-box;
				word-break: break-all;
				border: 1px solid #b6d4fe;
				box-shadow: 0 4px 16px rgba(0, 123, 255, 0.08);
			}

			.verification-section::before {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle, rgba(0, 123, 255, 0.08) 0%, transparent 70%);
				animation: pulse 4s ease-in-out infinite;
				z-index: 0;
			}

			.code-label {
				color: #007bff;
				font-size: 14px;
				margin-bottom: 16px;
				font-weight: 500;
				position: relative;
				z-index: 1;
			}

			.code-display {
				position: relative;
				z-index: 1;
			}

			.code-number {
				font-weight: 700;
				color: #1a1d29;
				font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
				text-shadow: 0 2px 8px rgba(0, 123, 255, 0.08);
				display: block;
				max-width: 100%;
				background: linear-gradient(90deg, #e3f0ff 60%, #f8fafb 100%);
				border-radius: 8px;
				padding: 8px 16px;
				margin: 0 auto;
				box-sizing: border-box;
				white-space: nowrap;
				text-align: center;
				font-size: clamp(18px, 8vw, 42px);
				letter-spacing: 0.2em;
			}

			@keyframes pulse {
				0%,
				100% {
					opacity: 0.5;
					transform: scale(1);
				}

				50% {
					opacity: 0.8;
					transform: scale(1.05);
				}
			}

			.info-grid {
				display: grid;
				gap: 16px;
				margin-bottom: 32px;
			}

			.info-card {
				background: #f8fafb;
				border-radius: 12px;
				padding: 20px;
				border: 1px solid #e9ecef;
				transition: all 0.2s ease;
			}

			.info-card:hover {
				border-color: #007bff;
				background: #f0f7ff;
			}

			.info-item {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #495057;
				font-weight: 500;
			}

			.info-icon {
				width: 20px;
				height: 20px;
				margin-right: 12px;
				flex-shrink: 0;
				color: #007bff;
			}

			.highlight {
				color: #007bff;
				font-weight: 600;
			}

			.security-notice {
				background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
				border: 1px solid #ffc107;
				border-radius: 12px;
				padding: 20px;
				color: #856404;
				font-size: 13px;
				line-height: 1.6;
				position: relative;
			}

			.security-notice::before {
				content: '🔒';
				font-size: 18px;
				margin-right: 8px;
			}

			.footer {
				background: #f8fafb;
				padding: 24px 40px;
				text-align: center;
				border-top: 1px solid #e9ecef;
			}

			.features-row {
				display: flex;
				justify-content: center;
				gap: 32px;
				margin-bottom: 20px;
			}

			.feature-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
			}

			.feature-icon {
				width: 32px;
				height: 32px;
				background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 16px;
			}

			.feature-text {
				font-size: 12px;
				color: #6c757d;
				font-weight: 500;
			}

			.copyright {
				font-size: 12px;
				color: #adb5bd;
				font-weight: 400;
			}

			/* 响应式设计 */
			@media (max-width: 480px) {
				.login-container {
					margin: 10px;
					border-radius: 20px;
				}

				.header {
					padding: 32px 24px 24px;
				}

				.content {
					padding: 0 24px 32px;
				}

				.verification-section {
					padding: 20px 6px;
				}

				.code-number {
					width: 100%;
					text-align: center;
				}

				.features-row {
					gap: 20px;
				}

				.footer {
					padding: 20px 24px;
				}
			}

			/* 数字跳动动画 */
			.code-number {
				animation: slideIn 0.6s ease-out;
			}

			@keyframes slideIn {
				from {
					opacity: 0;
					transform: translateY(10px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
		</style>
	</head>
	<body>
		<div class="login-container">
			<div class="header">
				<div class="logo">VcPay</div>
				<div class="tagline">全球虚拟卡平台</div>
			</div>
			<div class="content">
				<h1 class="title">{{if .TitleZh}}{{.TitleZh}}{{else}}注册验证码{{end}}</h1>
				<p class="subtitle">{{if .GreetingZh}}{{.GreetingZh}}{{else}}欢迎使用VcPay！{{end}}</p>
				<div class="verification-section">
					<div class="code-label">您的验证码</div>
					<div class="code-display">
						<div class="code-number">{{if .Code}}{{.Code}}{{else}}------{{end}}</div>
					</div>
				</div>
				<div class="info-grid">
					<div class="info-card">
						<div class="info-item">
							<svg class="info-icon" fill="currentColor" viewBox="0 0 24 24">
								<path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
							</svg>
							<span>有效期：<span class="highlight">{{if .Expiration}}{{.Expiration}}{{else}}5分钟{{end}}</span></span>
						</div>
					</div>
					<div class="info-card">
						<div class="info-item">
							<svg class="info-icon" fill="currentColor" viewBox="0 0 24 24">
								<path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9V9L10,17Z" />
							</svg>
							<span>安全验证：<span class="highlight">256位加密</span></span>
						</div>
					</div>
					<div class="info-card">
						<div class="info-item">
							<svg class="info-icon" fill="currentColor" viewBox="0 0 24 24">
								<path d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M5,5H19V19H5V5Z" />
							</svg>
							<span>使用提示：<span class="highlight">请及时输入验证码</span></span>
						</div>
					</div>
				</div>
				<div class="security-notice">
					<strong>安全提醒：</strong>
					<span>{{if .WarningZh}}{{.WarningZh}}{{else}}为保障您的账户安全，请勿将验证码泄露给他人。{{end}}</span>
				</div>
			</div>
			<div class="footer">
				<div class="features-row">
					<div class="feature-item">
						<div class="feature-icon">🌐</div>
						<div class="feature-text">全球支付</div>
					</div>
					<div class="feature-item">
						<div class="feature-icon">💳</div>
						<div class="feature-text">虚拟卡</div>
					</div>
					<div class="feature-item">
						<div class="feature-icon">🔒</div>
						<div class="feature-text">安全可靠</div>
					</div>
					<div class="feature-item">
						<div class="feature-icon">⚡</div>
						<div class="feature-text">极速到账</div>
					</div>
				</div>
				<div class="copyright">
					© 2024 VcPay • 安全全球支付
				</div>
			</div>
		</div>
	</body>
</html>